디자이너는 TypeScript를 듣자마자 기법이 늘어나 어려워졌다는 인상을 준다.
확실히 기법은 증가하지만 디자이너에게도 충분한 장점이 있다.
이 글은 주로 디자이너에게 TypeScript를 사용하는 장점을 설명한다.
또한 TypeScript를 실행할 수 있는 환경을 제공하고 최소한 기억해야 할 쓰기 방법을 소개합니다.

전제 지식

간단한 JavaScript로 작성

TypeScript

명령의 경우 터미널에서 수행할 수 있음

TypeScript의 가치

TypeScript를 사용하면 직접 말하면 개발이 수월해집니다.

함수의 입력과 출력 알기

보완 기능 강화

이런 귀한 것이 있다.이것들에 관해서 나는 아래에서 자세히 볼 것이다.
겸사겸사 말씀드리지만, 이것들도 당연히 엔지니어의 귀중한 점입니다.

함수의 입력과 출력을 알다

예를 들어 다음과 같은 기능을 실현하는 것을 고려한다.
양식에 입력한 숫자를 오름차순으로 정렬하고 내보내기

이 기능을 실현하기 위해서 "수치를 오름차순으로 정렬하는 함수"를 써 보세요.
JavaScript

function sortByAsc(numbers) {
  return numbers.sort((a, b) => a < b ? -1 : 1)
}

갑자기 이 함수를 보았을 때 다음과 같은 의문이 있지 않습니까?

매개 변수는 무엇입니까?

숫자 배열의 공백 구분 문자열?
→ numbers

숫자 배열의 쉼표 구분 문자열?
→ '9 87 654 321'

수치의 배열?
→ '9,87,654,321'

반환값 is는 무엇입니까?

정렬된 문자열?
→ [9, 87, 654, 321]

정렬 후 수치 정렬
→ '9 87 321 654'

만약 네가 이 함수를 사용하고 싶다면, 위의 일은 반드시 명확해야 한다.
똑똑히 하려면 실현된 코드를 실제로 사용하거나 읽을 수밖에 없다.
이번처럼 한 줄만 있는 코드는 괜찮지만 길고 복잡한 함수를 읽지 않으면 사용법을 몰라 솔직히 힘들다.

유형 주석

[9, 87, 321, 654] 함수를 TypeScript로 작성해 보십시오.
TypeScript

function sortByAsc(numbers: number[]): number[] {
  return numbers.sort((a, b) => a < b ? -1 : 1)
}

TypeScript를 사용하면 유형 메모(유형 메모)를 작성할 수 있습니다.매개 변수가 어떤 값을 입력해야 하는지, 이 함수는 어떤 값을 되돌려줄지 명확하게 설명한다.
유형 주석을 사용하면 함수를 일목요연하게 입력하고 출력할 수 있다.
그나저나 "그냥 댓글로 쓰면 되지 않겠어요?"이 가능하다, ~할 수 있다,...
물론 이렇게 해도 되지만 형식 주석을 사용하면 VScode에서 실시간으로 알려줄 수 있습니다.


어떤 값인지 알면 말할 것도 없고, 실수를 알려주기 때문에 사전에 실수를 방지할 수 있다.

보완 기능 향상

JavaScript 하면 쓸데없는 것들이 많이 나와요...

TypeScript라면 실제 존재하는 속성으로만 바뀝니다!

여기까지의 총결산

따라서 TypeScript의 중요한 점은 다음과 같습니다.

함수의 입력과 출력 알기

보완 기능 강화

그리고 이것들은 모두'형'의 공로다!
다음은 TypeScript의 유형을 실제로 이동하면서 학습합니다.

TypeScript 개발 환경 준비

TypeScript를 손으로 쓰고 이동하기 위해서는 먼저 개발 환경을 준비해야 합니다.

전제 조건

아래 내용을 미리 설치하십시오.

Node.js

Visual Studio Code (VSCode)

TypeScript 이동 방법

대략 세 가지 방법이 있다.

TypeScript Playground

tsc

Webpack (ts-loader)

이번에는 tsc를 사용합니다.

tsc로 TypeScript 이동

설치 유형 스크립트.(첫 번째면 된다)

npm install -g typescript

TypeScript로 작성된 파일을 준비합니다.
index.ts

function sortByAsc(numbers: number[]): number[] {
  return numbers.sort((a, b) => a < b ? -1 : 1)
}

const sorted = sortByAsc([9, 87, 654, 321])
console.log(sorted)

TypeScript를 JavaScript로 변환합니다.

tsc index.ts # index.js が生成される

생성된 index입니다.실행 js.

node index.js # -> [ 9, 87, 321, 654 ]

이렇게 하면 TypeScript로 쓴 파일을 이동할 수 있습니다!
따라서 TypeScript를 JavaScript로 변환하여 실행해야 합니다.변환은 sortByAsc 명령입니다.
TypeScript의 귀중한 점은 쓰여진 코드만 읽는 것만으로는 전달하기 어렵다.손에 써보거나 실행해 보면 알 수 있다.
아래에 설명한 내용도 반드시 수중에 써서 실행하세요.

유형 스크립트 유형 정보

다음은 형식 스크립트 형식 시스템의 기본 부분이다.

취할 수 있는 값 제한

변수의 값을 제한할 수 있습니다.

let era: string = '令和'                     // string 型
let year: number = 2019                     // number 型
let heisei: boolean =  false                // boolean 型
let eras: string[] = ['昭和', '平成', '令和'] // string 型の配列

물론 함수에 대한 유형을 정의할 수도 있다.

function sortByAsc(numbers: number[]): number[] {
  return numbers.sort((a, b) => a < b ? -1 : 1)
}

다른 유형의 값을 입력하면 컴파일러가 오류를 토해내기 때문에 의외의 값을 방지할 수 있습니다.

year = '2020' // -> Type 'string' is not assignable to type 'number'.

모형을 만들 줄 안다

너는 tsc 또는 interface로 금형을 만들 수 있다.

// name, start, end の3つのプロパティを持つ Era 型を定義
interface Era {
  name: string;
  start: Date;
  end?: Date; // 現在の元号の終わりはわからないので undefined を許可する
}

const reiwa: Era = {
  name: '令和',
  start: new Date('2019-05-01'),
}

const heisei: Era = {
  name: '平成',
  start: new Date('1989-01-08'),
  end: new Date('2019-04-30'),
}

// '昭和', '平成', '令和' のいずれかの文字列のみ許容する Era 型を定義
type Era = '昭和' | '平成' | '令和'

const era: Era = '大正' // -> Type '"大正"' is not assignable to type 'Era'.

유형 추리

유형을 명확하게 쓰지 않아도 추론의 기능이 있다.
예를 들어 방금 type 함수의 반환값 유형을 생략해 보십시오.

function sortByAsc(numbers: number[]) {
  return numbers.sort((a, b) => a < b ? -1 : 1)
}

생략되었음에도 불구하고 다음과 같이 sortByAsc의 유형은 sorted형으로 판정되었다.이것이 바로 유형 추리다.

이것은

매개변수의 number[]는 numbers형

반환값은 number[]형number[] 방법의 결과

sort()유형number[]방법반환sort()유형

따라서 우리는 number[] 함수의 반환값이 반드시 sortByAsc 이라고 추정한다.
특히 모양을 의식하지 않아도 모형을 마음대로 추론할 수 있어 보수적으로 편리하다.

총결산

주로 디자이너를 대상으로 TypeScript를 사용하면 유형이 비싸다는 것을 설명한다.

함수의 입력과 출력 알기

보완 기능 강화

또한 TypeScript를 실행할 수 있는 환경을 마련하여 기본 유형을 설명합니다.

설명이 없는 일.

이 글은 TypeScript 유형 시스템의 기본 부분을 설명합니다.
다른 한편, 나는 TypeScript의 또 다른 큰 특징인'클래스 기반 대상 지향'을 설명하지 않았다.
'클래스 기반 대상 대상'은 코드의 희소성, 유지보수성, 중용성 등을 향상시키고 대형 응용 프로그램도 감당할 수 있는 디자인을 가능하게 할 수 있다.
어쨌든 이것은 엔지니어에게 귀중한 내용이기 때문에 나는 이 보도에서 생략하기로 결심했다.
이곳을 배우고 싶은 사람은 아래에 소개된 기사를 읽어 보세요.

TypeScript에 대해 더 많이 배우고 싶어요.

TypeScript를 더 자세히 배우고 싶다면 다음 기사를 추천합니다.
디자이너가 쓴 기사라서 따라가기 쉬워요.
TypeScript 시작 시 요약 - 웹 계정
http://www.webcyou.com/?p=5588
더 고급스러운 것을 배우고 싶다면 아래를 추천합니다.
상당히 높은 내용이지만 위에 쓰인 내용을 눌렀다면 TypeScript가 좋았을 거예요.
TypeScript Deep Dive 일본어 버전
https://typescript-jp.gitbook.io/deep-dive/