typescript grammar

BackEnd_Ash.log·2021년 7월 16일

typescript

목록 보기

1/17

📌type Declaration

👉 string


let str: string;
let red: string = 'Red';
let green: string = 'Green';
let myColor: string = `My color is ${red}`

👉 number

let num: number;
let integer: number = 6;
let float: number = 3.14;
let hex: number = NaN;

infact , if you used java you know that float is not number ,
In other words , it is not int but , typescript uses integers

👉 boolean

let isBoolean: boolean;
let isDone: boolean = false;

const size: number = 123;
const isBig: boolean = size >= 100;
console.log("isBig : ", isBig); // true

👉 union type

let name : string | number = 'ahn';
let name : string | number = 123;
let name : string[] | number = ['test1' ,'test2' , 'test3'];

📌Array

👉 default declaration

// string
let fruits1: string[] = ["apple", "banana", "mango"]
let fruits3: Array<string> = ["apple1", "banana1", "mango1"]

// number
let oneToSeven1: number[] = [1, 3, 4, 5, 6, 7];
let oneToSeven3: Array<number> = [1, 3, 4, 5]

👉 multiple types

let array: (string | number)[] = ['Apple', 1, 3, 'Banana', 'Mango', 3];
let array3: Array<string | number> = ['Apple', 1, 3, 'Banana', 'Mango', 3];

👉 any types

let someArr: any[] = [0, 1, {}, [], 'str', false];

📌Type alias

type myType = string | number;
let name :myType =123;

👉 array tuple type

type Member = [number , boolean];
let ahn : Member = [123, true]
let ahn : Member = ['123', true] // 에러 발생

👉 object type

type Member = {
  name : string
}

let ahn : Member = {name : 'ahn'}
let ahn : Member = {name : 123} // 에러 발생

👉 모든 object 속성지정

base 1

type Member = {
  [key : string] : string,
}

let ahn : Member = {name : 'ahn' , age : '123' , number: '456'}

object 속성 지정 & forEach

const genre_data:string[] = ['comic' , 'action','romance'];

interface MovieData {
  action  : number;
  comic   : number;
  romance : number;
}

// interface MovieData {
// 	[key: string] : number;
// }

let data : MovieData = {
  'comic'   : 1,
  'action'  : 2,
  'romance' : 3
};

genre_data.forEach(genre => {
  data[`${genre}`] += 1
});

console.log(data);

📌Tuple

// Tuple
let user: [number, string, boolean] = [1234, 'HEROPY', true];
console.log(user[0]); // 1234
console.log(user[1]); // 'HEROPY'
console.log(user[2]); // true

📌 Object

let name : {name : string} = {name : 'kim'}
let name : {name : string} = {} // optional

📌 Function

👉 return type

void

function add(num1 : number , num2 : number):void {
  console.log(num1 + num2);
}

return type

function add(num1 : number , num2 : number):void {
  console.log(num1 + num2);
}

function adult(age : number):boolean {
  return age > 19;
}

function functionTest ( x: number) : number {
  return x * 2;
}

functionTest(2);
functionTest('2'); // 에러발생

👉 with optional

import { log } from "console";

function hello(name?:string){
  return `hello , ${name || "world"}`;
}

const result = hello();
const result2 = hello("sam");

log(result); // hello , world
log(result2) // hello , sam

👉 default value

import { log } from "console";

function hello(name?:string) {
  return `Hello , ${name || "world"}`;
}

function hello2(name = "world") {
  return `Hello , ${name}`;
}

const result = hello();
const result2 = hello("Sam");

log(result) // Hello , world
log(result2) // Hello , Sam

📌 loop

👉let ... in

array

let list:string[] = ['test1' , 'test2' , 'test3'];

for (let i in list){
  console.log(i , list[i]);
}

of course you can't type designation

let list = ['test1' , 'test2' , 'test3'];

for (let i in list){
  console.log(i , list[i]);
}
// a apple
// b bird
// c crazy

object

let obj:any = {"a":"apple", "b":"bird", "c":"crazy"};

for (let property in obj) {
    console.log(property, obj[property])
}
// a apple
// b bird
// c crazy

👉 let ... of

let string : string = "hello";

for (const s of string){
  console.log(s);
}
// h
// e
// l
// l
// o

📌 class

class Car {
  color : string;
  constructor(color:string){
    this.color = color;
  }
  start(){
    console.log("start")
  }
}

const bmw = new Car("red");
bmw.start();

👉 접근제한자

public : 자식클래스 , 클래스 인스턴스 모두 접근가능
protected : 자식 클래스에서 접근가능
private : 해당 클래스 내부에서만 접근 가능
readonly : 읽기전용 이다. 접근은 가능하나 수정이 안됨

public

class Car {
  // color : string;
  constructor(public color:string){
    this.color = color;
  }
  start(){
    console.log("start")
  }
}

const bmw = new Car("red");
bmw.start();

private

class Car {
  private name : string = "car";
  color:string;
  constructor(color:string){
    this.color =color;
  }
  start(){
		console.log("start");
  }
}

class Bmw extends Car {
	constructor(color: string) {
		super(color);
	}
	showName() {
		console.log(super.name); // 여기서 에러발생 -> private
	}
}

const z4 = new Bmw("black");

protected

class Car {
  protected name : string = "car";
  color:string;
  constructor(color:string){
    this.color =color;
  }
  start(){
		console.log("start");
  }
}

class Bmw extends Car {
	constructor(color: string) {
		super(color);
	}
	showName() {
		console.log(super.name); // protected 는 상속
	}
}

const z4 = new Bmw("black");

readonly

class Car {
	// color: string;
	constructor(readonly color: string) {
		this.color = color;
	}
	start() {
		console.log(`start ${this.color}`);
	}
}

const bmw = new Car("red")
bmw.start()

👉 static

class Car {
	readonly name: string = "car";
	color: string;
	static wheels = 4;
	constructor(color: string, name) {
		this.color = color;
		this.name = name;
	}
	start() {
		console.log("start");
		console.log(this.name);	
		console.log(this.wheels); // 에러발생
	}
}

class Bmw extends Car{
	constructor(color: string, name) {
		super(color, name);
	}
	showName() {
		console.log(super.name);
	}
}

const z4 = new Bmw("black", "zzzz4");
console.log(z4.wheels); // 에러발생

지금과 같이 작성하게되면 에러가 발생하게 된다.
이유는 this 로 접근이 되지않고 , 인스턴스로 접근이 되지않기 때문이다.

멤버변수에다가 static 을 사용하게되면 this 로 불러오는것이 아니라 , 클래스명을 적어서 불러와야한다.

멤버변수뿐만아니라 메서드에도 static 을 사용하게 되면 클래스명을 적어서 불러와야한다.

class Car {
	readonly name: string = "car";
	color: string;
	static wheels = 4;

	constructor(color: string, name) {
		this.color = color;
		this.name = name;
	}
	start() {
		console.log("start");
		console.log(this.name);	
		console.log(Car.wheels);
	}
	static staticStart() {
		console.log("static start");
	}
}

class Bmw extends Car{
	constructor(color: string, name) {
		super(color, name);
	}
	showName() {
		console.log(super.name);
	}
}

const z4 = new Bmw("black", "zzzz4");

console.log(Car.wheels);
console.log(Car.staticStart);

👉 추상클래스 ( abstract )

추상클래스는 new 를 이용해서 인스턴스를 한다거나 객체를 만들수가 없습니다.
오로지 상속을 통해서만 가능합니다.

abstract class Car {
	color: string;
	constructor(color: string) {
		this.color = color;
	}
	start() {
		console.log("start");
	}
}

const car = new Car("red");

class Bmw extends Car{
	constructor(color: string) {
		super(color);
	}
}

const z4 = new Bmw("red");
console.log(z4);

추상클래스에서 적은 변수라던지 메서드는 상속 받은 쪽에서 반드시 작성을 해줘야한다.
그렇지 않으면 에러가 발생하게 된다.
구체적인 기능은 상속받는쪽에서 작성한다고 생각하면 된다.

abstract class Car {
	color: string;
	constructor(color: string) {
		this.color = color;
	}
	start() {
		console.log("start");
	}

	abstract doSomething(): void;
}

// const car = new Car("red");

class Bmw extends Car{
	constructor(color: string) {
		super(color);
	}
	doSomething() {
		alert(3);
	}
}

const z4 = new Bmw("red");
console.log(z4);

📌 generic

제네릭을 사용하게 되면 , 클래스나 함수 인터페이스를 다양한 타입으로 재 사용할 수가 있다.
선언할때는 그냥 타입파라미터만 적어두고 생성하는 시점에서 사용하는 타입을 결장하게 된다.

function getSize<T>(arr: T[]): number {
	return arr.length;
}

const arr1 = [1, 2, 3];
getSize(arr1);// 3
getSize<number>(arr1);

const arr2 = ["a","b","c"];
getSize(arr2);// 3 
getSize<string>(arr2);// 3 

const arr3 = [false , true , true];
getSize(arr3);// 3 

const arr4 = [{}, {},{name:"Tim"}];
getSize(arr4);// 3

👉 interface 제네릭

interface Mobile<T> {
	name: string;
	price: number;
	option: T;
}

const m1: Mobile<object> = { 
	name: "s21",
	price: 1000,
	option: {
		color: "red",
		coupon : false,
	}
}

const m2: Mobile<string> = {
	name: "s20",
	price: 900,
	option:"good"
}

interface User{
	name: string;
	age: number;
}

interface Car{
	name: string;
	color:string;
}

interface Book{
	price:number;
}

const user: User = { name: 'a', age: 10 };
const car: Car = { name: 'bmw', color: 'red' };
const book: Book = { price: 3000 };

function showName(data): string{
	return data.name;
}

showName(user);
showName(car);
showName(book);

위와같은 코드를 제네릭을 사용해서 적용해 볼것이다.

interface User{
	name: string;
	age: number;
}

interface Car{
	name: string;
	color:string;
}

interface Book{
	price:number;
}

const user: User = { name: 'a', age: 10 };
const car: Car = { name: 'bmw', color: 'red' };
const book: Book = { price: 3000 };

function showName<T>(data:T): string{
	return data.name; // name 에서 에러가발생한다.
}

showName(user);
showName(car);
showName(book);

T 에는 name 이 없다고 나와있다.
User , Car 에는 name 이 있는 Book 에는 name 이 안보인다.

그러니 모든 매개변수에 name 이 있다고 장담하지 못하니깐 에러가 발생하게 된다.

interface User{
	name: string;
	age: number;
}

interface Car{
	name: string;
	color:string;
}

interface Book{
	price:number;
}

const user: User = { name: 'a', age: 10 };
const car: Car = { name: 'bmw', color: 'red' };
const book: Book = { price: 3000 };

function showName<T extends {name:string}>(data:T): string{
	return data.name; 
}

showName(user);
showName(car);
showName(book);
// 제네릭타입에 확장을 해서 name:string 인 객체를 확장한 형태이다.
// 다양한 객체가 올순 있지만 항상 name:string 을 가지고있어야한다

👉 제네릭 obejct & list


function list_merge1<A>(a:Array<A>, b:Array<A>): Array<A> {
	return a.concat(b);
}
function list_merge2<A extends string[], B extends string[]>(a: A, b: B): string[] {
	return a.concat(b);
}

const merged3 = list_merge1(["1"], ["string1", "string2", "string3"])
console.log(merged3);

const merged4 = list_merge2([1], ["string1", "string2", "string3"])
console.log(merged4);

BackEnd_Ash.log

꾸준함이란 ... ?

다음 포스트