무료 Typescript 5 강좌

소프트웨어 개발자로서 2025년 목표를 달성할 수 있도록 완전한 Typescript 과정을 완전 무료로 제공합니다!

? 무엇을 배울까요?
? 클래스 001 - 기본 유형
? 클래스 002 - 객체와 배열
? 클래스 003 - 기능
? 클래스 004 - 기타 유형
? 클래스 005 - 공용체 유형, 유형 주장 및 리터럴 유형
? 클래스 006 - 유형 추론
? 클래스 007 - 인터페이스 및 유형
? 클래스 008 - 제네릭
? 클래스 009 - 유틸리티 유형
? 클래스 010 - 수업(1부)
? 클래스 011 - 수업(2부)
? 클래스 012 - 추가 팁
? 클래스013 - 실전 도전

실생활에서 Typescript를 사용할 때 가장 많이 사용하게 될 모든 내용을 실무적으로 배우게 됩니다.

이미 Javascript를 알고 계시다면 Typescript는 코드에 더 많은 보안과 확장성을 제공하여 경력에 획기적인 변화를 가져올 것입니다.

설정

수업을 시작하기 전에 먼저 개발 환경 설정을 구성하고 사용할 몇 가지 도구를 설치 및 구성해야 합니다.

노드 설치

컴퓨터에 Node가 설치되어 있지 않은 경우 https://nodejs.org/en/download로 이동하여 운영 체제에 따라 설치할 수 있습니다.

VS 코드 설치

저는 VS Code를 편집기로 사용할 예정이며, https://code.visualstudio.com에 접속하여 다운로드 받으실 수 있습니다.

타이프스크립트 설치

Node가 설치되면 프로젝트를 시작하고 Typescript를 구성할 수 있습니다.

폴더를 생성하고 새로 생성된 폴더에서 터미널을 열고 Enter 키를 눌러 다음 명령을 실행합니다.

npm init -y && code .

이 명령은 package.json 파일을 생성하고 폴더에서 VS Code를 엽니다. VS Code에서 보기 > 통합터미널을 오픈하는 터미널입니다.

이제 통합 VS Code 터미널에서 다음 명령을 실행하세요.

npm i -D typescript

이 명령은 Typescript를 package.json의 개발 종속성으로 설치합니다.

tsconfig.json이라는 파일을 생성하고 파일에 다음 구성을 추가합니다.

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "target": "ES2020",
    "strict": true,
    "noEmitOnError": true
  }
}

tsconfig.json 파일은 Typescript 컴파일러를 구성하는 데 사용됩니다. 우리가 만들 수 있는 몇 가지 구성이 있습니다. 현재 우리는 다음 구성에만 관심이 있습니다.

• rootDir - Typescript 파일의 경로를 설정합니다.
• outDir - Javascript 파일의 출력 폴더를 정의합니다.
• target - 컴파일러가 파일을 컴파일하는 데 사용해야 하는 Javascript 버전을 정의합니다.
• strict - 엄격 모드를 활성화합니다.
• noEmitOnError - 오류가 있는 경우 컴파일을 실행하지 않습니다.

https://www.typescriptlang.org/docs/handbook/compiler-options.html을 방문하면 사용 가능한 모든 옵션을 알아볼 수 있습니다

package.json 파일에 액세스하고 다음 명령을 사용하여 새 빌드 스크립트를 만듭니다.

npm init -y && code .

브라우저도 Node처럼 Typescript를 이해하지 못하기 때문에 Typescript 코드를 Javascript로 컴파일해야 이해하고 실행할 수 있습니다. 이 명령은 Typescript 코드를 Javascript로 컴파일하여 Node.

에서 실행할 수 있도록 합니다.

결국 모든 Typescript 코드는 Javascript가 된다는 점을 기억하세요. Typescript는 코드의 유형 안전성과 확장성을 개선하기 위해 개발에 사용되는 도구일 뿐입니다.

마치려면 다음 코드를 사용하여 src라는 폴더와 index.ts 파일을 만듭니다.

npm i -D typescript

이제 모든 것이 작동하는지 테스트해 보겠습니다. 터미널을 열고 다음을 실행하세요.

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "target": "ES2020",
    "strict": true,
    "noEmitOnError": true
  }
}

실행할 때 모든 것이 정상이면 터미널에 Hello World가 표시되어야 합니다.

콘솔에서 무엇인가를 보고 싶을 때마다 이 명령을 실행하여 파일을 Javascript로 컴파일해야 합니다. 그렇죠?

---

기본 유형

TypeScript에는 문자열, 숫자, 부울, 기호, bigint, null 및 정의되지 않은 6가지 기본 유형이 있습니다.

npx tsc && node ./dist/index.js

끈

문자열은 따옴표로 묶인 모든 항목입니다. 작은따옴표(''), 큰따옴표("") 또는 역따옴표()일 수 있습니다.

숫자

여기에는 구분이 없습니다. 정수, 소수, 양수, 음수 등 모든 것이 숫자로 처리됩니다.

부울

진실 혹은 거짓 고전.

상징

약간 추상적이지만 기호는 고유 식별자입니다. 사물의 지문이라고 생각하시면 됩니다.

Bigint

숫자가 이미 크다면 bigint는 거의 무한대입니다. 공학용 계산기로도 풀 수 없는 숫자를 처리할 때 사용하세요.

널

값이 없는 변수를 나타냅니다.

한정되지 않은

초기화되지 않은 값을 나타냅니다.

---

아래 링크에 접속하시면 수업 코드에 접근하실 수 있습니다:
https://github.com/d3vlopes/curso-typescript/tree/aula-001

다음 수업

다음 수업에서는 Typescript의 객체와 배열에 대해 배워보겠습니다.

? 질문이나 문제가 있나요?
설정 구성에 문제가 있었나요? 수업에 대해 궁금한 점이 있나요? 여기에 댓글로 게시하고 모두가 접근할 수 있는 고품질 자료를 함께 만들어 봅시다.

위 내용은 무료 Typescript 5 강좌의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!