오늘부터 타입스크립트에 대한 공부를 시작했다!
요즘은 타입스크립트가 필수가 된 것 같아 궁금증이 생기기 시작해서 공부를 시작했다.
타입 스크립트는 인터넷 강의를 보면서 공부를 시작하기로 했는데, 노마드코더의 "타입스크립트로 블록체인 만들기"를 듣기로 했다. 타입스크립트를 인터넷 강의를 보면서 하고 싶은 분들은 무료 강의이니 부담없이 들어도 될 것 같다..!
그럼 본격적으로 오늘 공부한 내용을 공유해보려고 한다!
2.0 Typescript Works
타입 스크립트는 우리가 작성한 코드를 확인한 이후에 변환된 자바스크립트 안에서 실수가 일어나지 않게 확인을 해준다.
→ 즉, 타입스크립트 코드에 에러가 있으면 그 코드는 자바스크립트로 컴파일 되지 않는다.
typescript 코드 예시
이전에 js로 코드를 실행했을 때는 실행을 해도 에러가 없었다. 하지만, ts는 바로 에러를 표시해준다.
2.1 Implicit Types vs Explicit Types
js에서는 변수를 그냥 생성하면 됐었지만, ts는 변수를 생성한다면 어떤 타입인지 정해줘야 한다.
타입 스크립트는 두 가지 접근방식을 결합했다.
- 데이터와 변수의 타입을 명시적으로 정의할 수 있다.
- 아니면 그냥 js처럼 변수만 생성하고 넘어가도 된다.
→ ts가 타입을 추론해주기 때문이다.
Implicit 방식
처음 변수를 선언할 때, a는 string이 되어야 한다는 것을 추론하고 있다.
따라서, 숫자를 넣어주면 error 메세지를 넘겨준다.
Explicit 방식
boolean이라고 명시했지만, string 값을 넣어서 에러 메시지를 던져준다.
2.2 Types of TS part One
ts 사용 방법
let 변수명 세미콜론 타입(number, string, 타입[]);
ex)
let a : number = 1;
let b : string[] = ["a", "B"];
let c : boolean = true; challenge(optional)
player가 있는데, player들 중 몇몇은 age가 있고, 몇몇은 age가 없지만, 모두 name을 가지고 있다고 생각하자. 모든 player가 name은 있지만, 그 중 몇몇만 age를 가지고 있는 것.
object의 타입 정의 및 optional parameter
const player : {
name: string,
age?: number
} = {
name: "nico",
}
위 코드와 같이 ? 를 붙여주면 된다.
alias
const playerNico : {
name: string,
age?: number
} = {
name: "nico",
}
const playerLynn : {
name: string,
age? :number
} = {
name: "Lynn",
age: 12
}playerNico, playerLynn이 내용이 똑같아서 Alias 타입을 생성할 수 있다.
type Player = {
name: string,
age?: number
}
const playerNico : Player = {
name: "nico",
}
const playerLynn : Player= {
name: "Lynn",
age: 12
}위와 같이 alias를 지정해줄 수 있다.
→ 첫 글자는 대문자로 작성해줘야 한다.
2.3 Types of TS part Two
return 값의 타입을 지정하는 방법
type Age = number;
type Name = string;
type Player = {
name: Name,
age?: Age
}
function playerMaker(name: string) : Player{
return {
name
}
}
const nico = playerMaker("nico");
nico.age = 12;parameter 뒤에 : 타입 명을 입력해주면 된다.
function playerMaker(name: string) : 타입명 {
return ~
}화살표 함수에서 typescript 사용하기
type Age = number;
type Name = string;
type Player = {
name: Name,
age?: Age
}
const playerMaker = (name: string) : Player =>({name});
const nico = playerMaker("nico");
nico.age = 12;readonly 속성을 타입에 추가하기
type Player = {
readonly name: Name,
age?: Age
}readonly는 읽기 전용으로 바꿔주는데, 수정을 하려고 하면 에러 메세지를 던져준다.
튜플(Tuple)
array를 생성할 수 있게 하는데, 특정 위치에 특정 타입이 있어야 한다.
const player: [string, number, boolean] = ["nico", 12, false];배열 안에 타입을 지정해주면 된다.
const player: readonly [string, number, boolean] = ["nico", 12, false];위와 같이 readonly 속성과 같이 사용할 수도 있다.
any
비어있는 값들을 쓰면 기본값이 any가 된다.
any는 ts로부터 빠져나오고 싶을 때 사용하는 것
즉, 실수를 하더라도 ts에게 에러 메세지를 받지 않고 어떤 타입이든 사용하고 싶을 떄 사용하는 것이다.
const a : any[] = [1, 2, "3", false];
const b : any = true;
a + b이렇게 작성해도 에러가 발생하지 않는다.
즉, any는 ts의 모든 보호장치를 비활성화 시킨다.
2.4 Types of TS part Three
unknown type
let a: unknown;
if(typeof a === "number"){
let b = a + 1;
}
if(typeof a === "string"){
let b = a.toUpperCase();
}위와 같이 변수의 타입을 미리 알지 못할 때 unknown을 사용한다.
void
function hello():void{
console.log("x");
}아무것도 return하지 않는 함수를 대상으로 사용한다.
보통 void를 따로 지정해줄 필요는 없다. ts는 해당 함수가 아무것도 return하지 않는다는 것을 자동으로 인식해주기 때문이다.
never
함수가 절대 return하지 않을 때 발생한다.
function hello():never{
return "X";
}
타입을 never라고 지정해줌으로써 오류를 발생시킨다.
복수개의 타입
function hello(name: string | number){
if(typeof name === "string"){
name += "play";
}
else if(typeof name === "number"){
name += 1
}
else{
console.log(name);
}
}if문에서는 name이 string, else if문에서는 name의 타입은 number가 된다.
else 문에서는 never 타입으로 지정이 된다.
