2023/03/22 (udemy) TypeScript 강의 섹션 2: 기초 및 기본 유형

typeScript에는 많은 유형이 있습니다.

핵심 유형

템플릿 리터럴이란 무엇입니까?

참조 : https://velog.io/@rlaghwns1995/JavaScript-%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%A6%AC%ED%84%B0%EB%9F%B4

저번에 만든 프로젝트를 사용하자

npm start로 서버를 엽니다.

app.ts 파일의 내용을 삭제합니다.

핵심 데이터 유형

//app.ts

function add(n1, n2){
    return n1 + n2;
}

const number1 = 5;
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);

tsc app.ts로 컴파일합니다.

괜찮아요

이 부분을 문자열로 변환하면

이렇게 기록되어 있습니다.

올바른 결과로 표시되지 않음

문자열과 문자열을 연결한 결과가 나왔습니다.

매개변수에 유형 할당 추가

ts는 매개변수의 유형을 지정할 수 있습니다.

function add(n1: number, n2: number){
    return n1 + n2;
}

const number1 = 5;
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);

app.ts와 app.js가 동시에 열려 있으면 오류가 발생합니다.

app.js 파일을 닫으세요!

중복 기능 구현과 관련된 IDE에서 오류가 발생할 수 있기 때문입니다.

---

ts 유형 대 js 유형

연산자 유형

숫자를 말합니다.

이것을 사용하여 if 문으로 오류를 처리할 수 있습니다!

콘솔에 오류가 표시되어야 합니다.

난 그냥 떠있어 ​​(인강은 떠있어)

위는 일반적인 js 코드입니다.

하지만 이 부분은 타자기 불필요

js 동적 유형

• 즉, 나중에 문자열을 할당하더라도 처음에 숫자형을 담을 수 있는 변수가 있어도 문제가 없다.
• 따라서 특정 유형에 의존하는 코드가 있으면 런타임에 확인합니다.
• typeof 연산자를 사용하는 것처럼

반면에!

Typescript 정적 타이핑

• 즉, 개발 중에 종료되는 변수 및 매개 변수의 유형을 정의해야 합니다.
• 런타임 x에서 변경

때때로 런타임에서 유형을 가져오는 것이 유용할 수 있지만 다음 예와 같습니다.

때로는 개발 중에 가져오는 것이 훨씬 낫습니다.

코어: 대소문자 구분

항상 타이프 스크립트로 선 또는 숫자 와 같은 종류로 취급

*중요한 : 선, 숫자 o / 문자열, 숫자 x

기본 TypeScript 프리미티브는 모두 소문자입니다.

---

숫자 문자열 및 부울 값 작업

js든 ts든 모든 숫자 유형은 기본적으로 float 유형입니다.

5와 5.0 사이에는 차이가 없습니다.

이 비교의 결과는 부울 보지마.

여기서 삼중 등호 !== 또는 부등호는 참 또는 거짓으로 평가되는 연산자입니다.

function add(n1: number, n2: number, showResult: boolean){
    // if( typeof n1 !== 'number' || typeof n2 !== 'number' ){
    //     throw new Error('Incorrect Input!'); // 잘못된 입력 (타입 오류 처리)
    // }
    // js는 boolean 타입이 오면 알아서 참인지 아닌지를 검사한다.
    if(showResult) {
        console.log(n1 + n2);    
    } else {
        return n1 + n2;
    }
}

const number1 = 5; // 5.0
const number2 = 2.8;
const printResult = true;

const result = add(number1, number2, printResult);

7번째 줄

if 문의 값이 참이면 콘솔 값이 출력됩니다.

function add(n1: number, n2: number, showResult: boolean, phrase: string){
    // if( typeof n1 !== 'number' || typeof n2 !== 'number' ){
    //     throw new Error('Incorrect Input!'); // 잘못된 입력 (타입 오류 처리)
    // }
    // js는 boolean 타입이 오면 알아서 참인지 아닌지를 검사한다.
    if(showResult) {
        console.log(phrase + n1 + n2);    
    } else {
        return n1 + n2;
    }
}

const number1 = 5; // 5.0
const number2 = 2.8;
const printResult = true;
const resultPharae="Result id : ";

const result = add(number1, number2, printResult, resultPharae);

2개의 숫자형을 조합하여 문자열을 생성하여 오류가 발생했습니다.

그 이유는?

구문 때문에 모든 것이 문자열로 변환됩니다.

이 기능에서 이것을 피하려면

그렇게 하면 문자열처럼 계산되지 않기 때문에 숫자 유형으로 인식됩니다.

---

유형 할당 및 유형 유추

매개변수 이름: 유형

유형 할당은 js가 아닌 ts에서만 이해할 수 있습니다.

그래서 유형 추론라는 내장 함수도 있습니다.

즉, ts는 특정 변수 및 상수에 대해 어떤 유형이 사용되는지 매우 잘 이해합니다.

상수 번호 1 = 5;

number1은 항상 숫자 유형임을 이해합니다.

여기서 식별되는 유형은 숫자 유형이 아니라 상수 값 5입니다.

또한 let을 사용하면 숫자로 인식됩니다.

좋지 않은 방법

이미 ts가 숫자형이라는 것을 유추할 수 있고, 그 값이 상수인 5이기 때문에 유형을 부여하는 것은 좋지 않다.

이런 경우가 좋다

지정되지 않은 방식으로 이 변수를 생성하는 경우에만 변경

그렇게 미리 설정하지 않으면 나중에 값을 제공할 때 저장할 값을 ts에 알려주는 것이 좋습니다.

퀴즈

---

개체 모양

기존 basic.ts 파일의 이름을 바꾸고 새 app.ts 파일을 만듭니다.

이를 통해 개인 데이터의 유형에 관한 것이라고 결론을 내릴 수 있습니다.

js의 객체처럼 보이지만 차이점은

(쉼표) x ; (세미콜론) 쓰기 o

js 키와 값하지만

ts는 키와 유형입니다.입력

개체 유형은 어딘가에서 사용되는 개체 유형을 설명하기 위해 작성된 것입니다.

개체를 지정하는 방법

• 중괄호 { }
• 키 지정 및 입력

하지만 이 방법은 좋지 않다

앞에서 배웠던 것처럼 ts를 이해하는 것이 좋습니다.

이 형식이 더 나은 구문입니다.

중첩 개체 및 유형

물론 객체 유형 중첩 개체위해 생성할 수도 있습니다.

다음과 같은 js 객체가 있다고 가정합니다.

이 개체 유형아래와 같다

따라서 객체 유형 내에 객체 유형이 있다고 말할 수 있습니다.

---

배열 유형

: 유형 ( ) 데이터 배열을 표현

문자열의 배열임을 유추할 수 있습니다.

문자 및 숫자 유형의 혼합 배열을 만들면 오류가 발생합니다.

어떤 남자 => 혼용 가능

Any는 매우 유연하지만 ts 이점 유형을 사용하지 못하게 할 수 있습니다!

이렇게 코드를 다시 변경

지침으로 돌아가기

그 사람의 취미를 반복하십시오.

hobby.toUpperCase()에 문제가 없는 이유

=> ts는 취미가 문자열의 배열 유형이라는 것을 이미 알고 있기 때문입니다.

그래서 지도 방법은 이것을 할 수 없습니다! (배열에는 사용할 수 있지만 문자열에는 사용할 수 없음)

---

튜플 작업

튜플 (1, 2)

배열이지만 고정 길이, 고정 유형 배열입니다.

js에는 없습니다.

튜플에는 항상 두 개의 요소가 있어야 합니다.

첫 번째 항목은 숫자 식별자 / 두 번째 요소는 문자열 식별자 (설명)

즉, 문자열이나 숫자를 저장할 배열을 지정하면 ts가 이해할 것입니다.

그건 조합 유형보지마.

중요한 점: ts는 이 유형의 값을 포함하는 배열이어야 함을 이해하십시오.

단점: 오류 없이 푸시할 수 있습니다.

ts는 역할이 문자열 유형 또는 숫자 배열이라는 것만 인식합니다.

따라서 저자를 숫자로 대체하여 이 번호를 두 번째 요소에 할당하는 것이 허용됩니다.

즉, 두 요소 중 첫 번째 요소는 숫자여야 하고 두 번째 요소는 문자열이어야 합니다.

나는 그것을 모른다.

이를 재정의하고 알려주는 데 사용할 수 있는 튜플이 있으면 좋을 것입니다.

튜플의 기능

역할 번호 문자열 이 코드에서는 두 개의 요소(역할 정의)만 있는 특수 배열을 입력해야 합니다.

첫 번째는 숫자, 두 번째는 문자열

두 가지 유형만 입력할 수 있습니다.

관리자를 역할 배열로 이동할 수 있는 이유는 무엇입니까?

• 푸쉬는 예외튜플에서 허용됨
• ts는 이러한 오류를 포착하지 않지만 적어도 유효하지 않은 값을 할당하지는 않습니다.

추가 항목을 추가하면 오류가 발생합니다.

---

열거 열거

열거형 { 신규, 이전 }

사람이 읽을 수 있는 라벨

ID는 각각 admin 0 / 읽기 전용 사용자 1 / writer 2입니다.

이 숫자는 정확히 동일하게 주어질 수 있습니다.

* 단점

• 중요하지 않을 수 있는 숫자 추가필수 => 역할추출 > if 체크시 에러발생
• 단점은 개발자가 2가 작성자인지 또는 무엇인지 기억하지 못할 수 있다는 것입니다.
• 사람이 읽을 수 있는 식별자가 선호됩니다. 예) ADMIN 또는 READING USER …

역할에서 말하는 대로 정확히 if 문에서 확인할 수 있어야 합니다.

컴파일 실패 => 콘솔에 출력이 없습니다.

* 문자열 식별자의 단점

js에서는 일반적으로 전역 상수를 설정합니다.

const ADMIN = 0;
const READ_ONLY =1;
const AUTHOR =2;

const person = {
name: 'sunam',
age: 30,
hobbies: ('Sports', 'Cooking'),
role : ADMIN
}

let favoriteActivites: string();
favoriteActivites = ('Sports');

console.log(person.name);

for(const hobby of person.hobbies){
    console.log(hobby.toUpperCase());
}

if (person.role === ADMIN){
    console.log('is read only');
}

JS의 이 방법의 장점은 어디에서나 사용할 수 있다는 것입니다.

단점은 릴이 숫자로 파생된다는 것입니다.

모든 상수를 정의하고 관리해야 합니다.

열거형으로 해결할 수 있습니다!

열거형 정의 방법

열거형으로 이 모든 작업을 수행했으며 이를 통해 번호에 레이블을 할당할 수 있습니다.

app.js를 보면

역할은 컴파일된 코드에서 개체로 관리됩니다.

개발자는 이러한 방식으로 숫자를 생성하는 것이 편리합니다.

숫자가 0부터 시작하지 않도록 하려면 어떻게 해야 합니까?

+1은 귀하가 제공한 번호에 의해 자동으로 부여됩니다.

또는 다음 숫자나 문자를 다르게 하려면…

각각 지정하는 것도 가능합니다.

소식또한 관련이 있습니다!

• 위에서 정의한 다음 enum Role { … }
• 역할 유형을 참조하거나 사용자 정의 유형을 참조하거나
• if에서 타입 할당이나 사용법을 사용하는 것이 좋습니다.

사람이 읽을 수 있고 백그라운드에 연결된 값이 있는 식별자가 필요할 때 훌륭한 구성입니다.

---

어떤 남자

장점

• 가장 유연한 방법
• ts는 아무것도 이해하지 못합니다.
• 모든 값을 저장할 수 있습니다.

유형 지정은 필요하지 않습니다.

불리

• ts의 모든 장점은 any로 상쇄되므로 바닐라 js를 사용하는 것과 다르지 않습니다.
• ts 컴파일러가 작동을 중지하여 어떤 값이나 데이터 유형이 어디에 저장되고 있는지 파악하기 어렵습니다.
• 가능하면 사용하지 않는 단점

런타임 중 그렇게 나타나길 원해 작업 영역을 제한 당신은 무엇이든 사용할 수 있습니다.

그렇지 않으면 사용하지 않는 것이 가장 좋습니다.

---

조합형

Combine을 사용할 때 n1 + n2의 더하기 연산자를 사용할 수 있습니다.

숫자와 문자열을 모두 포함할 수 있습니다.

숫자 또는 연결된 문자열이 결과로 반환될 수 있습니다.

function combine(input1: number, input2: number){
    // js는 boolean 타입이 오면 알아서 참인지 아닌지를 검사한다.
    let result = input1 + input2;
        return result;
}

const combineAges = combine(30, 26);
console.log(combineAges);

잘 작동한다

하지만 문자열을 생성하려고 할 때 문제가 있습니다.

sunam 유형의 인수에는 유형 번호를 지정할 수 없습니다.

이와 같이 서로 다른 두 가지 타입의 값을 사용해야 하는 어플리케이션에서,

조합 유형사용.

오류가 나타납니다

더하기 연산자가 “문자열 또는 숫자” 유형에 적용되지 않는 오류입니다.

=> ts는 공용체 유형만 이해합니다. 공용체 유형 x 내부에 무엇이 있는지 구문 분석

해결

런타임 유형 확인 추가

ts는 input1과 input2가 모두 숫자이고

그렇지 않으면 문자열의 합계가 반환됩니다.

function combine(input1: number | string, input2: number | string){
    let result;
    if(typeof input1 === 'number' && typeof input2 === 'number'){
        result = input1 + input2;
    } else {
        result = input1.toString() + input2.toString();
    }
        return result;
}

const combineAges = combine(30, 26);
console.log(combineAges);

const combineNames = combine('sunam', 'love');
console.log(combineNames);

두 경우 모두 잘 작동합니다.

코드 어디에서나 함수 내에서 수행하는 작업에 더 유연하게 공용체 유형을 사용하는 방법입니다.

그만큼 추가 런타임 유형 검사는 공용체 유형을 사용합니다.작업할 때 종종 필요합니다.

코드에 적용된 매개변수를 보다 유연하게 사용할 수 있습니다.

---

리터럴 유형(+ 유니온 유형)

특정 변수나 매개변수가 아닌

숫자도 문자열도 아닌 정확한 값을 가진 타입입니다.

유형이 닫히지 않고 2.8이라고 표시됩니다.

불변 상수이기 때문에

2.8은 숫자이지만 구체적인 숫자

문자열도 유용할 수 있습니다.

function combine(
    input1: number | string,
    input2: number | string,
    resultType: string
    ){
    let result;
    if(typeof input1 === 'number' && typeof input2 === 'number'){
        result = input1 + input2;
    } else {
        result = input1.toString() + input2.toString();
    }
    // 'as-number'일 경우 결과값을 숫자형으로 +result
    if (resultType === 'as-number'){
        return +result;
    } else {
        return result.toString();
    }
}

const combineAges = combine(30, 26, 'as-number');
console.log(combineAges);

const combineStringAges = combine('30', '26', 'as-number');
console.log(combineStringAges);

const combineNames = combine('sunam', 'love', 'as-text');
console.log(combineNames);

3026은 문자열을 결합한 결과입니다.

왜? 해당 유형이 input1.toString() ~ 여기에서 문자열로 대응하기 때문입니다.

고치자

입력 값이 숫자이거나 “숫자로”인 경우.

입력 값을 숫자로 추가 // (+) 단항 더하기 연산자를 사용하여 문자열을 숫자로 변환

같은 결과를 준다

유니온 유형 + 리터럴 유형

리터럴 유형은 문자열 및 숫자와 같은 핵심 유형을 기반으로 합니다.

특정 용도로 이 유형을 사용할 수 있습니다.

이 두 문자열만 허용하고 문자열은 허용하지 않음(이 두 값 중 하나여야 함) => 리터럴

리터럴 유형을 공용체 유형으로 지정

공식 문서에 정리된 데이터: https://codingnewbie.103

조합 유형

---

유형 별칭(alias) / 사용자 정의 유형

공용체 유형으로 작업할 때 계속 반복하는 것은 번거롭습니다.

이에 대한 좋은 ts 기능은 유형 별칭입니다.

별칭 만들기

이는 코드의 양을 줄이고 Combinable을 사용할 때 항상 동일한 유형 또는 유형 설정을 참조합니다.

별칭 및 객체 유형 입력

유형 별칭 사용 유형을 직접 “생성”합니다.당신은 할 수 있습니다.

공용체 유형만 저장할 수 있는 것은 아닙니다. 복잡한 개체 유형도 별칭이 지정될 수 있습니다.

type User = { name: string; age: number };
const u1: User = { name: 'Max', age: 30 }; // this works!

User 타입은 이름은 문자열, 나이는 숫자 타입!

u1: 사용자 유형

유형 별칭의 이점 => 불필요한 반복을 피하고 중앙에서 유형을 관리합니다.

예를 들어 다음 코드는 다음과 같이 단순화할 수 있습니다.

단순화 전!

function greet(user: { name: string; age: number }) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: { name: string; age: number }, checkAge: number) {
  return checkAge > user.age;
}

단순화 후

type User = { name: string; age: number };
 
function greet(user: User) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: User, checkAge: number) {
  return checkAge > user.age;
}

---

퀴즈

---

함수 반환 유형 및 무효

TS는 반환 값도 파생됩니다.=> : 끝에 있는 숫자

숫자 유형을 반환할 것으로 예상합니다.

그만큼 정해진그것은 또한 가능하다

void type => 반환할 것이 없을 때 사용할 타입

function add(n1: number, n2: number) : number {
    return n1 + n2;
}

function printResult(num: number){
    console.log('result : ' + num);
}

printResult(add(5,12));

콘솔에는 17이 올바르게 표시됩니다.

여기 빈 남자 반환 콘솔만 가져오고 아무것도 반환하지 않습니다.

여기서 헷갈리는 부분

undefined는 ts의 유형입니다!보지마.

선언된 유형이 void도 아니고 any도 아닌 함수는 값을 반환해야 합니다.TS(2355)

기능 정의되지 않은 것을 포함하여 아무 것도 반환하지 않으면 무효 사용

void를 사용한다는 것은 함수에 의도적으로 return 문이 없다는 것을 의미합니다.

정의되지 않음 실제 값이 반환되지 않을 때 사용할수있다.

=> 그러나 이것은 드문 경우입니다.

결론: return문과 함께 void를 사용하는 것이 맞다고 한다.

undefined를 생성해야 하는 함수가 실제로 있는 경우 기본적으로 void를 사용합니다.

값을 반환하지 않는 함수를 사용할 때는 void 기본값을 사용하세요.

명시적으로 void를 지정할 수 있지만 ts는 이 코드를 유추하는 데 차이가 있습니다.

---

유형으로 작동하는 함수

function add(n1: number, n2: number) : number {
    return n1 + n2;
}

function printResult(num: number) : void{
    console.log('result : ' + num);
    return;
}

printResult(add(5,12));

let combineValues;

combineValues = add;

console.log(combineValues(8, 8));

함수를 변수에 저장하고 콘솔에 출력하면

임의이기 때문에 컴파일이 가능합니다.

나는 ts를 원하지 않지만 이해하지 못하므로 컴파일에 문제가 없습니다.

그러나 런타임 오류가 발생합니다.

이 오류를 방지하려면 CombineValues에 기능이 있음을 지정하십시오.

기능 유형세트

함수를 저장하자

잘못된 기능은 원하는 결과를 저장하지 않습니다.

ts는 이러한 문제에 대해 아무 것도 말할 수 없습니다.

기능 유형은 기능 매개변수그리고 반환 값관련 기능을 설명하는 기능으로

js에서 이것은 화살표 기능 표기이 표기법에 따라 또는 그 근처에 만들어짐

이 변수가 함수를 받거나 두 개의 숫자를 받아들이고 하나의 숫자를 반환하는 함수를 저장하도록 합니다.

---

함수 유형 및 콜백

function addAndHandle(n1:number, n2:number, cb : (num : number) => void ){
    const result = n1 + n2;
    cb(result);
}

addAndHandle( 10, 20, (result) => {
    console.log(result);
})

결과 = 10 + 20

콜백의 장점

함수 내부에 콜백을 전달함으로써 ts는 결과가 숫자가 될 것이라고 추론할 수 있습니다.

그리고 call 문에 void를 리턴하고 return을 쓰면?

결과적으로 오류가 없습니다. cb는 여기에 반환된 값으로 아무 것도 할 수 없습니다.cb 유형에서 고유하게 정의됩니다.

퀴즈

---

알 수 없는, 알 수 없는 유형

알 수 없는 유형

오류 없이 모든 값을 저장할 수 있음 => 모든 것이 허용됨

알 수 없기 때문에 어떤 값이든 userInput으로 전달할 수 있습니다.

오류가 사라지는대로 변경하면 => 유연한 유형 (유형 검사 수행 x )

사용 시기

사용자 입력에 현재 저장된 유형을 확인해야 합니다.

문자열 유형에 알 수 없는 유형을 할당할 수 없습니다.

지정하시겠습니까? 추가 검사 필요

고정 값을 할당할 수 있기 때문에 다른 어떤 것보다 좋습니다. (유형 테스트)

자주 사용하는 유형은 아니지만 경우에 따라 더 나을 수 있습니다.

---

절대 유형 절대

void와 달리 반환 값이 있습니다.

타이프스크립트에서 절대 유형은 비어 있는 값 세트입니다.

사실 또 다른 유명한 자바스크립트 시스템 흐름~에 절대 유형은 비어 있는 같은 유형

세트에 값이 없기 때문에, 절대 유형은 어느 유형 값을 포함하여 어떤 값도 가질 수 없습니다.

그래서 절대 유형은 때때로 빈 또는 토양 유형그것은이라고.

function generateError(message: string, code: number){
    throw {message: message, errorCode: code};
}

generateError('An error occurred!!', 500);

이 함수는 절대 반환하지 않으며 반환 값을 생성하지 않습니다.

절대 유형은 많이 사용되지 않을 수 있지만

허용되지 않는 함수 매개변수에 대한 제한.