타입스크립트 필수 문법

1. 변수에 타입 지정하기

let 이름 : string = 'kim';

변수에 문자만 들어올 수 있도록 타입을 'string'으로 지정

2. 배열에 타입 지정하기

let 이름 : string[] = ['kim', 'park'];

배열안의 값은 문자만 들어올 수 있도록 배열 타입을 'string'으로 지정

3. 객체에 타입 지정하기

let 이름 : {name:string} = {name:'kim'};

객체내의 값은 문자만 들어올 수 있도록 객체 타입을 'string'으로 지정

4. 타입스크립트 객체에 해당 속성이 들어올지 아닐지 불확실할때

let 이름 : {name?:string} = {};

'name'속성 뒤에 ?를 넣어 해당 속성은 옵션 값임을 선언, 해당 속성이 안들어오더라도 오류가 발생하지 않음

5. 타입스크립트 타입에 다양한 타입이 들어오도록 하려면

let 이름 : string[]|number = 123;
let 이름 = ['kim', 'park'];

타입 선언하는 부분에 원하는 타입들을 넣고 사이에 '|'(OR 기호)를 넣어 다양한 타입에 대응

6. 타입을 변수에 담아쓰기

type Name = string|number;
let 이름 : Name = 123;

타입을 변수에 저장해 사용이 가능하다. 보통 변수명의 첫글자는 대문자로 선언하여, 일반 변수와 구분한다.

7. 함수에 타입 지정하기

function 함수(x :number) :number {
	return x * 2
}

함수의 파라미터와, return 값에도 타입이 지정가능하다. return 값의 타입지정은 return 값 옆이 아니라 파라미터 옆에 선언한다. 위의 함수는 파라미터로 number, return 값으로 number를 줘야하는 함수이다.

type Name = string;
type Age = number;
type Player = {
	name: Name,
	age?: Age
}

위와 같이 변수에 저장한 타입을 객체 타입의 값들(name, age)의 타입으로도 재활용해 쓸 수 있다.

type Name = string;
type Age = number;
type Player = {
	name: Name,
	age?: Age
}

function playerMaker(name:string) : Player {
	return{
		name
	}
}

const kim = playerMaker("kim")
kim.age = 12

함수 playerMaker를 사용하여 변수 kim을 name을 가진 객체로 만들었다. 그 후 age를 입력하려 했지만 오류를 뱉는다.

그 이유는 함수 playerMaker가 return하는 것이 name뿐이기 때문. 이 오류를 해결하기 위해 함수 playerMaker의 타입을 Player로 설정해주면 TypeScript는 이제 playerMaker가 return하는게 Player라는 것을 알기때문에 오류가 나지 않는다.

type Name = string;
type Age = number;
type Player = {
	name: Name,
	age?: Age
}

const playerMaker = (name:string) : Player => ({name})

화살표 함수에서의 파라미터, return 값의 타입 지정

8. Array에 사용할 수 있는 tuple 타입

type User = [number, string, string];
let user1:User = [1, 'setType77', '1q2w3e4r'];

tuple 타입의 예. 배열의 첫번째 자리는 number, 두번째,세번째 자리는 string을 지정

tuple(튜플)타입은 Array의 길이와 타입을 고정해서 사용하는 것을 의미합니다.

위의 경우 Array의 첫번째에 사용자 인덱스, 두번째에 아이디, 세번째에 비밀번호인 배열에 사용자 인덱스 자리에 비밀번호가 들어간다던지하는 문제를 막기위해 tuple 타입을 지정하여, 첫번째 자리는 number, 두번째,세번째는 string으로 선언, 인덱스 자리에 문자인 비밀번호가 들어가면 에러를 발생시킵니다.

9. object에 타입 지정해야할 속성이 너무 많다면

type Member = {
	[key :string] : string,
}
let john : Member = {name : 'kim', age : '123'}

[key :string] : string은 “글자로 된 모든 object 속성의 타입은 : string”을 의미한다.

object에 속성이 많아져서(1만개라던지..) 모든 속성에 타입을 일일히 지정하기가 힘들다면, 위와 같이 모든 object 속성에 타입을 한번에 선언 할수도 있다.

10. class에 타입 지정

class User {
	name :string;
	constructor(name :string){
		this.name = name;
	}
}

class에서는 constructor에서 타입 사용전에 미리 선언해주어야한다.

ihateindex