1. 타입스트립트 기본
function add(num1: number, num2: number) : void {
console.log(num1 + num2)
}
function show1 (arr: number[]) {
arr.forEach(el => console.log(el))
}
function show2 (arr: Array<number>) {
arr.forEach(el => console.log(el))
}
type Score = "A" | "B" | "C" | "d"
interface User {
name : string;
age : number;
gender? : string;
readonly birthYear : number;
[grade:number] : Score
}
let user : User = {
name : "somin",
age: 26,
birthYear : 1996,
1 : 'A',
}
user.gender = 'female'
2. 인터페이스
interface Add {
(num1 : number, num2: number) : number;
}
const add2 : Add = function (x, y) {
return x + y
}
interface IsAdult {
(age:number) : boolean
}
const a : IsAdult = (age) => {
return age > 19;
}
a(26)
interface Car {
color : string;
wheels: number;
start() : void;
}
class Bmw implements Car {
color = "red";
wheels = 4;
start() {
console.log("gogogo")
}
}
class Bmw2 implements Car {
color;
wheels = 4;
start() {
console.log("gogogo")
}
constructor (c : string) {
this.color = c
}
}
const b = new Bmw2("green")
interface Benz extends Car {
door : number,
stop () : void
}
class benz implements Benz {
color = "red";
wheels = 4;
start() {
console.log("gogogo")
}
door = 5;
stop(){
console.log("stopstop")
}
}
interface Toy {
nema : string;
}
interface ToyCar extends Car, Toy {
price : number
}
3. 함수
function hello(name? : string) {
return `hello, ${name} || "world`
}
const result = hello()
function hello2(name = "world") {
return `hello, ${name}`
}
function add3(...nums: number[]) {
return nums.reduce((result, num) => result + num, 0)
}
interface User1 {
name : string;
}
const Sam: User1 = {
name : 'sam'
}
function showName(this:User1) {
console.log(this.name)
}
const a1 = showName.bind(Sam);
a1();
interface User2 {
name: string;
age: number;
}
function join(name: string, age: number ) : User2
function join(name: string, age: string ) : string
function join(name: string, age: number | string): User2 | string{
if(typeof age === "number") {
return {
name,
age,
}
} else {
return "나이는 숫자로 입력해 주세요"
}
}
const sam: User2 = join("sam", 26)
const jane: string = join("sam", "26")
4. 리터럴, 유니온(|), 교차 타입
const userName1 = "bob"
let userName2 = "tom"
type Job = "police" | "developer" | "teacher";
interface User3 {
name : string;
job : Job;
}
const user4 : User3 = {
name : "bob",
job : "police",
}
interface Computer {
name: "computer";
color : string;
start() : void;
}
interface Mobile {
name: "mobile";
color : string;
call() : void;
}
const getGift = (gift: Computer | Mobile) => {
console.log(gift.color);
if(gift.name === "computer") {
gift.start()
} else {
gift.call()
}
}
interface Car2 {
name : string;
start() : void;
}
interface Toy2 {
name : string;
color : string;
price : number;
}
const toyCar : Toy2 & Car2 = {
name : "타요",
start(){
console.log("goooo")
},
color: "blue",
price: 20000,
}
6. 클래스
class Car {
constructor( color : string) {
this.color = color;
}
static start() {
console.log("go")
}
}
7. 제네릭
function getSize(arr : number[] | string[]) : number {
return arr.length
}
const arr1 = [1, 2, 3]
getSize(arr1)
const arr2 = ["a", "b", "c"]
getSize(arr2)
function getSize1<T>(arr : T[]) : number {
return arr.length
}
getSize1<number>(arr1)
getSize1<string>(arr2)
interface Phone<T> {
name: string;
price: number;
option: T;
}
const p1: Phone<object> = {
name: "13",
price: 1000000,
option : {
color : "white",
coupon : false,
}
}
const p2: Phone<string> = {
name: "12",
price: 800000,
option : "old",
}
interface A {
name : string;
age : number;
}
interface B {
name : string;
color : string;
}
interface C {
price : number;
}
const aaa : A = {name: "aaa", age: 10}
const bbb : B = {name: "aaa", color: "red"}
const ccc : C = { price: 10}
function showName3 <T extends {name : string}>(data:T): string {
return data.name
}
showName3(aaa)
showName3(bbb)
8. 유틸리티 타입
interface User5 {
id: number;
name: string;
age: number;
gender?: "m" | "f"
}
type UserKey = keyof User5;
const uk:UserKey = "id"
let admin:Partial<User5> = {
id: 1,
name: "kkakka"
}
let admin2:Required<User5> = {
id: 1,
age: 26,
name: "kkakka",
gender: "f"
}
interface Score2 {
"1": "A" | "B" | "C";
"2": "A" | "B" | "C";
"3": "A" | "B" | "C";
}
const score1: Score2 = {
1: "A",
2: "B",
3: "C",
}
const score2: Record<"1"|"2"|"3", "A" | "B" | "C"> = {
1: "A",
2: "B",
3: "C",
}
type Grade3 = "1"|"2"|"3"
type Score3 = "A" | "B" | "C"
const score3: Record<Grade3, Score3> = {
1: "A",
2: "B",
3: "C",
}
interface Cat {
id: number;
name: string;
age: number;
}
function isValid(cat: Cat) {
const result: Record<keyof Cat, boolean> = {
id: cat.id > 0,
name: cat.name !== "",
age: cat.age > 0,
}
return result
}
interface Userr {
id: number;
name: string;
age: number;
gender: "m" | "f"
}
const pAdminn: Pick<Userr, "id" | "name"> = {
id: 0,
name: "kkaka"
}
const oAdmin: Omit<Userr, "age" | "gender"> = {
id: 0,
name: "kkaka"
}
type T1 = string | number;
type T2 = Exclude<T1, number>
type T3 = string | void | null | undefined
type T4 = NonNullable<T3>