Typescript가 나온 배경
ts는 js를 사용했을때의 문제점들을 보완해주기위해 개발되었다.
자바스크립트의 단점
자바스크립트는 굉장히 유연한 언어이기에 사용자가 잘못된 코드를 작성하더라도 에러를 잘 보여주지 못한다는 단점이 있다.
예를들어
1. 배열 [1,2,3,4] , boolean형 false가 있다고 해보자.
js는 [1,2,3,4] + false 같이 말도안되는 계산식을 에러를 보여주지않고 계산해버린다...
계산 결과 : '1,2,3,4false'
2. 함수에 들어가는 인자에 갯수가 다르거나 타입이 이상해도 에러를 보여주지 않는다.
function plus(a,b) { return a+b}
plus('o') // NaN
3. 잘못된 코드로 실행시 런타임 후에야 에러를 보여준다.
{ a: 10 }
a.hello() // 코드 실행 후에야 에러를 보여준다. (런타임 에러)
타입스크립트가 자바스크립트를 대체한 이유
타입 스크립트의 장점: 타입 안정성을 가지고 있어 변수에 타입을 지정해줌으로써
자바스크립트의 단점들을 보완한다.
(즉 코드 실행 전에 에러를 발생시켜 사용자에게 인지시킨다.)
타입스크립트가 동작하는 법
우리가 TS로 코드를 작성하면 코드는 TS-> JS로 변환되는데 이는 브라우저가 JS를 이해하기 때문이다.
TS->JS로 코드가 변환되는 것을 컴파일 된다고 한다.
JS로 컴파일 되기전에 TS는 작성한 코드를 확인해 에러가 없는지 확인후, 에러가 있다면 컴파일 시키지 않는다.
이것이 TS가 동작하는 방법이다.
타입스크립트의 타입 지정 방법
타입 추론
예를들어
let a= "hi"; //TS는 a변수가 string 타입을 가질것을 추론한다.
a=1 // error타입 체커(checker) - 명시적 정의
예를들어
let a :boolean =false;
let b : number[] =[];
b.push(1);
b.push("1"); // error변수 뒤에 :를 붙여 타입을 지정해준다.
타입스크립트의 타입
타입에는 기본적으로 number, string, boolean, [] , {} , null, undefined이 있다.
객체 타입 지정
const player : {
name: string,
age?: number,
}
={
name:'khw',
}객체 타입설정시 속성앞에 ?는 해당 속성이 존재할수도 없을수도 있음을 명시해준다.
age는 number 또는 undefined 타입을 가지게된다.
타입을 변수로 설정(Alias)
해당 타입을 쓰는 변수가 많을경우 코드 재사용성을 높이기위해 사용. 대문자로 작성하며 앞에 type을 붙인다.
ex.
type Player= {
name: string,
age?: number,
}
const khw : Player ={
name: 'khw',
}
const kar : Player ={
name: 'kar',
}물론 타입 변수는 객체뿐 아니라 일반 타입도 설정가능하다.
type Name= "string";
const x : Name = 'hi';함수의 인자와 return값의 타입지정
인자는 변수뒤에 지정, return값은 함수명() 뒤에 지정
function playerMaker(name:string):{
name:string,
age?:number,
}
{
return {
name: name,
}
}
const khw =playerMaker('khw');
khw.age = 25;+)화살표 함수로 타입 설정하는 법
const playerMaker = (name:string) : {
name:string,
age?:number,
} =>{
return {
name: name,
}
}TS의 readonly 특성
타입 앞에 readonly를 붙이면 해당 타입을 가진 변수는 오로지 읽을 수 만 있게된다.
const numbers : readonly number[] = [1,2,3,4] ;
numbers.push(5); // error
const playerMaker = (name:string) : {
name:string,
readonly age?:number,
} =>{
return {
name: name,
}
}
const khw =playerMaker('khw');
khw.age = 25; // error배열에 적용할 수 있는 tuple
const player1 : [string,number,boolean] = ['zeri',10,true];
//player1은 반드시 지정된 타입을 가진 3개의 요소를 가진 배열을 가짐.
player1[0] = 10; // errorTS의 any 타입
말그래도 아무 타입이나 와도된다는 의미로 TS의 보호장치로부터 벗어나고 싶을 때 사용
TS로부터 빠져나오기 때문에 any타입은 쓰지 않을 것을 권장한다.
let a : any[] = [1,2,3,"4"];
let b : any = true;
console.log(a+b) // error가 발생하지 않음 . 결과: '1,2,3,4,true'TS의 또다른 타입들
앞서 말한 기본적인 타입들외에도 unknown, void, never이 있다.
unknown
변수의 타입을 미리 알지 못할 경우 사용한다.
let a : unknown;
let b= a+1; // error
// TS는 변수타입을 지정할 것을 요구한다.
if(typeof a ==="number"){
let b= a+1;
}void
void는 함수에 쓰이는 타입으로 함수가 반환되지만 반환값이 없을때 사용한다.
never
void와 비슷해보이지만 never는 함수가 반환되지 않는 경우 사용한다. 예외를 처리할 때 사용된다.
function hello():never{
return 'hi'; // error
}
function hello(name:string|number){
if(typeof name==='string'){
console.log(typeof name);
}
else if(typeof name==='number'){
console.log(typeof name);
}
else{
throw new Error('error') // o
console.log(typeof name); // name의 타입은 never
}
}