노마드코더의 TS 챌린지를 하면서 배운 내용들을 정리해 보려고 한다.ㅎㅎ
타입스크립트란 자바스크립트에 타입을 적어 오류를 무시하고 넘어가는걸 방지한다!!
자바스크립트의 문제
타입 안정성이 생겨서 코드에 버그가 줄어든다
런타임 에러도 줄어듬(콘솔에서 일어나는 에러)
true / false, 1234 등 다양한 타입이 JS에 있다
JS는 에러를 보여주지않으려고 노력함 -> [1,2,3,4] + false 해도 결과가 나옴!
=> 1,2,3,4false 가 되서 결국 배열이 아니라 string이 됨function divide(a,b) { reuturn a/b}
divide(“xxx”) => NaN 만 나타나고 코드는 실행됨!!
const nico = {name: “nico”}
nico.hello() -> 이러면 에러가 남!! 그래도 코드는 실행되서 undefiend가 나오긴함!
코드를 실행하기전에 에러를 잡아내자!!
타입스크립트 특징
강타입 프로그래밍 언어 -> 컴파일러 이런 언어는 코드를 컴파일 해서 001010로 바꾸고 어셈블리코드로 바꿈
타입 스크립트 작성하면 코드가 자바스크립트 코드가 됨
브라우저는 타입스크립트가 아닌 자바스크립트만 이해!!
Node.js는 둘 다 이해함
어떻게 나를 보호해주지? => 타입스크립트 코드가 컴파일 하기 전에 자바스크립트 코드 변환되기전에 체크를 해서 !!
“use strict”;
const nico = {
nickname: “nick”
}nico.hello() -> 이제는 에러 있다고 표현 함
[1,2,3,4] + false => 이것도 드디어 에라가 남!
타입스크립트의 타입 ! -> 자바스크립트는 변수만 그냥 생성하면 됨!
TS 두 가지 접근방식
데이터와 변수의 타입을 명시적으로 정의
JS처럼 변수만 적어도 됨
let a: string = “hello” -> TS는 a의 타입을 추론해서 string이어야한다는걸 알려줌
a = “bye” 이건 괜찮다 string 에서 string으로 바꿔서
a =1 안됨! -> a가 string -> number로 바꾸려고 해서
let b : boolean = false => 이렇게 적으면 타입 명시한거!
let c : number[] = [] -> 이렇게 하면 숫자 배열임!
c.push(1)
const player = {
name: “nico”
}
player.name = “h”
let a: number = 1;
let b: string = “ik”;
let c : boolean[] = [true]
변수이름 : 타입 = 값
타입추론이 되기 때문에 꼭 매번 써줄 필요는 없다const player : {
name: string,
age?: number -> 이러면 이건 선택적으로 적을 수 있다 number | undefined 가 됨
} = {
name: “nico”
}
player: object 라고 적는건 의미없음 !!
if (player.age && player.age < 10) {} => player.age가 undefined인지 검사하기!
TS에서 type Alias 설정하기 !!
type Player= {
name: string,
age?:number
}
type Age = number; 도 가능!!
const playerNico : Player = {name: “nico”}함수 리턴값 지정하기
function playerMaker(name:string) : Player {
return {
name: name => name이라고만 적어도 됨 같은 이름이면!
리턴값이 Player여서 age가 작동한다
}
}
const nico = playerMaker(“nico”)
nico.age = 12
const playerMaker= (name: string) : Player => ({name})
type Player= {
readonly name: string,
age?:number
}
const nico.name = “las” -> 한번 바꾼후 다음에 못바꾸게 하려면 readonly적기!!!!!readonly를 변수명 앞에 적으면 초기화 이후에 값 못바꿈!
const numbers: readonly numbers[] = [1,2,3,4]
numbers.push(1) -> 이건 오류!!
Tuple
[“nico”,12, false]
const monster: [string, number, boolean] = [“nico” , 1 , true] -> 이렇게 적으면 내가 원하는 애들을 섞은 배열을 만들수가 있다
player[0] = 1 작동 안함!
const monster: readonly [string, number, boolean] = [“nico” , 1 , true] => 이러면 못바꾼다!
let a: undefined = undefined
let b : null = null
let c: any = []any는 타입스크립트로부터 빠져나오고 싶을때 사용, 타입추론을 막는다
최대한 사용하지 말자!
const a : any[] =. 1,2,3,4
const b : any = true
a+b 가 작동함!! -> 이건 안좋음!
타입스크립트에만 존재하는것들 -> type checker와 소통 가능한 녀석들
어떤 타입인지 모르는 변수에 대해 TS에게 알려주기 - unknown
let a: unknown; -> TS로부터 일종의 보호를 받는다 -> 일단 변수의 타입이 뭔지 정해야함!
let b = a+1; -> 안됨!!
if(typeof a === ‘number’) { let b = a+1}
function hello() :void{
console.log(‘x’)
}void는 굳이 안 써줘도 됨 이건 그냥 리턴값 없음!
never는 절대 리턴하지 않을때!
function hello(name: string | number ) : never{
if (typeof name === “string”) {
name
}else if (typeof name === “number”) {
name
} else {
name -> 이때는 never타입이 되서 절대 작동 안함!
}
throw new Error(“xxx”) -> 이럴때 사용 에러를 출력할때!