Pesquisa de site

Importar outros módulos TypeScript

Estou tentando importar de um arquivo TypeScript, que está em node_modules. Esse arquivo não é transpilado e usa sintaxe TypeScript:

user.ts:
export const getUserFromToken = (token: string) => {
  return axios.get('/user', {
    headers: { authorization: `Bearer ${token}` }
  }).then(({ data }) => data)
}

Estou importando assim: import { getUserFromToken } from 'common-files/api/user', e common-files é um módulo registrado no package.json.

Ao tentar compilar, recebo:

../commons/api/user.ts
Module parse failed: C:\Users\xxxx\Desktop\xxxx\commons\api\user.ts 
Unexpected token (9:38)
You may need an appropriate loader to handle this file type.
| export const getUserFromToken = (token: string) => {
|   return axios.get('/user', {
|     headers: { authorization: `Bearer ${token}` }

O que me leva a acreditar que ele não está compilando o arquivo ts, porque quando eu removo o tipo string, ele se torna um arquivo es6 válido e começa corretamente.

No meu arquivo tsconfig.json eu tenho:

"exclude": [
  "node_modules",
  "build",
  "scripts",
  "acceptance-tests",
  "webpack",
  "jest",
  "src/setupTests.ts"
]

Estava pensando, talvez em excluir o node_modules, exceto aquele pacote common-files, mas não sei como fazer isso. Existe uma boa maneira de conseguir o que eu quero?

Resposta #1

@ShaunLuttin respondeu à pergunta para o caso geral. Meu problema era porque eu uso create-react-app com scripts TypeScript, e a configuração do webpack deles não permite o uso de arquivos TypeScript puros de módulos. Decidi transpilar todos os meus arquivos e gerar um build que pudesse ser usado como módulo. Funcionou, no entanto tive que garantir que nada que funcione apenas no ambiente Node fosse incluído ao trabalhar com projetos frontend.

Resposta #2

Observação: O que você está tentando fazer é incomum. Normalmente, projetos Node instalam módulos que já foram transpilados para JavaScript.

Dito isso, aqui está uma configuração que funciona para você e uma demonstração no GitHub. Como seu caso de uso é incomum, a solução é complexa.

Estrutura de diretórios > Observe o arquivo index.ts dentro do diretório common-files. Ele tem dois propósitos. Primeiro, ele listará os arquivos que queremos que o TypeScript transpile. Segundo, uma vez que ele for transpilado, o arquivo index.js dirá ao Node que a pasta common-files é um módulo. A documentação do Node sobre Pastas como Módulos explica como o Node resolve módulos.

node_modules    
  common-files
    api
      user.ts
    index.ts     <---- This file has two primary purposes.
index.ts        
package.json    
tsconfig.json

node_modules/common-files/api/user.ts > Este arquivo contém uma declaração que queremos usar em sua aplicação.

export const getUserFromToken = (token: string) => {
    console.log("Getting the user for token " + token);
}

node_modules/common-files/index.ts > De acordo com os padrões do NodeJS, este arquivo index.ts é o arquivo principal do seu módulo common-files. Como mencionado anteriormente, o arquivo principal também vai importar cada uma das declarações que queremos transpilar.

import "./api/user";

index.ts > Este arquivo representa a aplicação que você está construindo. Podemos importar qualquer uma das declarações transpiladas que o módulo common-files exporta.

import { getUserFromToken } from "common-files/api/user";

getUserFromToken("some-token");

package.json > Observe que não há nada de especial no arquivo de pacote node da sua aplicação. Dito isso, se você usou npm install para instalar o pacote common-files, então teríamos common-files listado na seção dependencies.

{
  "dependencies": { }, 
  "devDependencies": {
    "typescript": "^2.4.2"
  }
}

tsconfig.json > A configuração do TypeScript é um pouco complexa, porque seu módulo common-files precisa ser transpilado, e queremos excluir todo o resto dentro de node_modules. A documentação do tsconfig tem mais detalhes sobre como files, include e exclude interagem.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  },
  "files": [
    "node_modules/common-files/index.ts"
  ],
  "include": [
    "**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

A saída do console para a configuração acima se parece com isto:

> .\node_modules\.bin\tsc
> node index.js
Getting the user for token some-token

Artigos relacionados