주간 TODO
역할 : Static Checking
내가 코드를 작성하려고 할 때 에러를 체크해준다.
자바스크립트는 런타임 후에 에러를 뱉는다.
let car:string='bmw';
let age: number=30;
let a:number[]=[1,2,4];
let a2:Array<number>=[1,2,4];
let week1:string[]=['mon', 'tue'];
// 튜플
let b:[string, number];
b=['Z',1];
b[0].toLowerCase();
// b[1].toLowerCase(); error
(매개변수: 타입): 리턴값의 타입
function add(num1: number, num2: number): number{
return num1 + num2;
}
리턴 값이 없을 때 void
function add(num1: number, num2: number): void{
console.log(num1 + num2);
}
옵셔널
function hello(name?: string){ // 옵셔널 필요
return `Hello ${name || "world"}`; //name 매개변수가 있어도 되고 없어도 됨
}
const result = hello();
const result2 = hello('Sammy');
위와 같은 식
function hello(name = 'world'){
return `Hello ${name}`;
}
type= number[]
function add(...nums: number[]){
return nums.reduce((result, num)=> result + num, 0);
}
add(1,2,3) //6
add(1,2,3,4,5,6,7,8,9,10) //55
프로퍼티를 사용해서 객체 값을 표현하고자 할 때
let user:object;
user = {
name: 'heejin',
age: 28
}
console.log(user.name); // Property 'name' does not exist on type 'object'.
interface User{
name : string;
age: number;
}
let user: User={
name: 'heejin',
age: 28
}
user.age = 25; // age값 변경 가능
// user.gender = "female" 프로퍼티 추가 불가 - 인터페이스와 user객체에 정의되지 않았기 때문
console.log(user.name); //user까지만 적고 .을 찍으면 프로퍼티가 자동완성됨
있어도 되고 없어도 되는 프로퍼티
interface User{
name : string;
age: number;
gender? : string; // 옵셔널로 처리
}
읽기 전용 속성
최초 생성 시 할당 후 수정 불가
interface User{
name : string;
age: number;
gender? : string; // 옵셔널로 처리
readonly birthYear : number;
}
let user: User={
name: 'heejin',
age: 28,
birthYear: 1996,
}
user.birthYear = 1997; // Cannot assign to 'birthYear' because it is a read-only property
전부 옵셔널로 처리해주면 번거로워진다.
interface User{ 1? : string; 2? : string; 3? : string; 4? : string; } let user: User={ 1: 'A', 2: 'B', }
interface User{
[grade:number]: string;
}
let user: User={
1: 'A',
2: 'B',
}
type Score = 'A'|'B'|'C'|'F';
interface User{
[grade:number]: Score;
}
let user: User={
1: 'A',
2: 'B',
3: 'D', // Type '"D"' is not assignable to type 'Score'
}
interface Add {
(num1: number, num2: number): number;
}
const add: Add = function(x, y){
return x + y;
}
활용
interface IsAdult {
(age:number): boolean;
}
const a:IsAdult = (age)=>{
return age > 19;
}
a(28) // true
interface Car {
color: string;
wheels: number;
start(): void;
}
class Bmw implements Car {
color;
wheels = 4;
constructor(c:string){
this.color = c;
}
start(){
console.log("Go!");
}
}
const b = new Bmw('red');
console.log(b);
// [LOG]: Bmw: {
// "wheels": 4,
// "color": "red"
// }
b.start()
extends 가능
interface Car {
color: string;
wheels: number;
start(): void;
}
interface Benz extends Car {
door: number;
stop():void;
}
여러 개의 interface를 동시에 확장할 수 있다.
interface Car {
color: string;
wheels: number;
start(): void;
}
interface Toy {
name: string;
}
interface ToyCar extends Car, Toy{
price: number;
}